<template>
	<view>
	<!-- 分类 -->
		<ugo-search></ugo-search>
		<view class="category">
			<!-- 顶级分类 -->
			<view class="sup">
				<scroll-view scroll-y>
					<text
						v-for="(item, idx) in cates"
						:key="item.cat_id"
						:class="{active: idx===curIdx}"
						@click="hClick(idx)"
					>{{item.cat_name}}</text>
				</scroll-view>
			</view>
			<!-- 子级分类 -->
			<view class="sub">
				<scroll-view scroll-y>
					<!-- 封面图 -->
					<image src="http://static.botue.com/ugo/uploads/category.png" class="thumb" />
					<view class="children" :key="item.cat_id" v-for="item in subCate">
						<view class="title">{{item.cat_name}}</view>
						<!-- 品牌 -->
						<view class="brands">
							<navigator
								:url="'/packageone/list/list?query='+it.cat_name"
								v-for="it in item.children"
							>
								<ugo-image :src="it.cat_icon" />
								<text>{{it.cat_name}}</text>
							</navigator>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates: [],
				curIdx: 0 ,
				// 默认选中的一级分类的下标， 根据它来计算二级分类的数据
				// 全部的数据都取回来了，不需要重新发请求
			}
		},
		methods: {
			
			// 点击一级类目：
			// 1. 高亮显示
			// 2. 右侧二级类目的数据要变化
			hClick(idx){
				console.log(idx)
				this.curIdx = idx
			}
		},
		
		computed: {
			// 计算属性一定要有return
			/*
			 cates: [
				 {
					 name:'xxx',
					 children: []
				 },
				 {
					 name:'xxx',
					 children: []
				 }
			 ]
			*/
			subCate(){
				return this.cates.length > 0 ? this.cates[this.curIdx].children : []
			}
		},
		async onLoad() {
			const {data} = await this.request({url: '/categories'})
			this.cates = data
		}
	}
</script>


<style scoped lang="scss">
	scroll-view {
		height: 100%;
	}
	.category {
		display: flex;
		width: 100%;
		position: absolute;
		top: 100rpx;
		bottom: 0;

		.sup {
			width: 196rpx;
			background-color: #f4f4f4;

			text {
				display: block;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 27rpx;
				color: #333;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				&.active {
					background-color: #fff;
					color: #ea4451;
					position: relative;

					&::before {
						content: "";
						display: block;
						width: 8rpx;
						height: 60rpx;
						transform: translateY(-50%);
						background-color: #ea4451;

						position: absolute;
						left: 0;
						top: 50%;
					}
				}
			}
		}

		.sub {
			flex: 1;
			padding: 20rpx 18rpx;

			.thumb {
				width: 100%;
				height: 180rpx;
			}

			.children {
				text-align: center;
				color: #333;

				.title {
					display: inline-block;
					margin: 40rpx 0 20rpx;
					font-size: 30rpx;

					&::before {
						content: "/";
						margin-right: 20rpx;
						color: #666;
					}

					&::after {
						content: "/";
						margin-left: 20rpx;
						color: #666;
					}
				}
			}

			.brands {
				display: flex;
				flex-wrap: wrap;

				navigator {
					width: 33%;
					margin-bottom: 20rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					display: block;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
